<template>
  <transition name="scale">
    <div class="toast flex-wrap" v-if="showFlag">
      <div class="toastWin">
        <div class="content">
          <p>{{text}}</p>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>

  export default {
    name: '',
    data () {
      return {
        text: '',
        delay: 1000,
        showFlag: false
      }
    },
    mounted () {
    },
    methods: {
      show () {
        this.showFlag = true
      },
      hide () {
        this.showFlag = false
      }
    },
    components: {
    },
    watch: {
      showFlag (newVal, oldVal) {
        if (newVal) {
          setTimeout(() => {
            this.hide()
          }, this.delay)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../../sass/base.scss';
  @import '../../../sass/mixin.scss';
  
  .toast{
    width:100%;
    height:100%;
    position:fixed;
    left:0;
    top:0;
    background:rgba(0,0,0,0);
    justify-content: center;
    align-items: center;
    z-index:5000;
    &.scale-enter-active{
      animation: scale .2s;
      .toastWin{
        animation: scale .2s;
      }
    }
    .toastWin{
      border-radius:5px;
      -webkit-border-radius:5px;
      background:rgba(0,0,0,0.7);
      margin-top:-10vh;
      padding:10px;
    }
    .content{
      text-align:center;
      color:#fff;
      i{
        display:inline-block;
        width:40px;
        height:40px;
        background-size:cover;
        margin-bottom:5px;
        background-position:0 0;
        background-repeat:no-repeat;
      }
    }
  }

  @keyframes scale {
    0%{
      transform:scale(0);
    }
    100%{
      transform:scale(1);
    }
  }
</style>
